

		  *{
			padding: 0;
			margin:0;
		}

		    a,
			button,
			input {
				-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
			}
		a{
			text-decoration: none;
			color: white;
		}
		a:hover{
			color:white ;
		}
		a:link{
			color: white;
		}
		#content{

			height: 100vh;
			background:linear-gradient(gray,black);
			position: relative;
			overflow: hidden;
		}
		#header{
		 height: 100px;width:100%;
		background:cadetblue;
		 font-size: 32px;
		 color: whitesmoke;
		 position: relative;
		}
		#main{
			height: 79vh;overflow: hidden;
			width: 100%;
			position: relative;
		}
		#footer{
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items:center;
			background: whitesmoke;
			padding-top: 20px;
			position: relative;
		}
		#header ul{
			display: flex;justify-content: space-around;
		}
		#header ul li{
			height: 100px;width: 160px;
		
			list-style: none;
			font-size:1.2em;
			text-align: center;
			line-height: 100px;
		}
		#back{
			height: 100%;
			width: 100px;
			font-size:1.2em;
		 text-align: center;
			line-height: 100px;
		}
		#bar{
			position: absolute;
			height: 10px;
			width: 22%;
			background: whitesmoke;
			bottom: 0px;
			left: 36%;		
		    border-radius: 10px;
		}
		#main-title{
			height:140px;width: 100%;
			margin-top: 0px;
		
		}
		#main-title div{
			line-height: 140px !important;
			color:white;
		}
		.order{
			color:gray;
			height:100px;width: 10%;display: block;float: left;	text-align: center;font-size: 42px;line-height: 100px;
			overflow: hidden;
		}
		.song{
			height:100px;width: 50%;display: block;float: left;font-size: 42px;line-height: 100px;
		color:antiquewhite;	overflow: hidden;
		}
		.singer{
			color:antiquewhite;
			height:100px;width: 40%;display: block;float: left;font-size: 42px;line-height: 100px;	overflow: hidden;
			font-size: 32px;
		}
		
		#music-list{
			width: 100%;overflow-y: scroll;
		}
		#music-list ul li{
			width: 100%;list-style: none;height: 100px;
			padding: 10px 0px;
		
			border-top:none;
		}
		/* .list-li:hover{
		background:gray;
		} */
		
		
		/*audio - player*/
		#audio-player{
				
						height: 30px;
						width: 620px;
						position: relative;
				
					}
					#play-white{
						width: 0px;
						height: 12px;
						background: red;
						position: absolute;
						left: 0px;
						top: 7px;
						z-index: 2;
					
					}
					#play-gray{
						width: 600px;
						height: 12px;
						background: gray;
						position: absolute;
						left: 0px;
						top: 7px;
						z-index: 1;
						border-radius: 8px;
					}
					#play-point{
						width: 10px;
						height: 10px;
						background: white;
						position: absolute;
						left: 0px;
						top: -2px;
						z-index: 2;
						border-radius: 50%;
						border: 10px solid red;
					}
					.addTrans{
						transition: all 30000ms linear;
					}
					.whiteTarget{
						width: 100%;
					}
					.pointTarget{
						left: 100%;
					}
				   .audio-control{
					   height: 100px;width: 100px;
					   border-radius: 50%;
					   font-size: 64px;
					   text-align: center;
					   line-height: 100px;
				   }
					#audio-control{
						height: 100px;width: 400px;
						display: flex;
					   justify-content:space-between;
					   
					   margin-bottom: 20px;
					}
					.pages{
					/* 	filter: brightness(60%); */
						height: 100%;
						width: 100%;
						overflow: hidden;
						position: absolute;
						opacity: 0;
						z-index: 0;
						border: none;
						display: none;
					}
					.pages-original{
						opacity: 0;
					}
					.pages-trans{
						   z-index: 1 !important;
							opacity: 1 !important;
							transition: all 400ms;
							display:block;
					}
					.header-li{
						display: inline-block;
					}
				   #search-text {
					   position: absolute;left: -10px;top: 100px;background:whitesmoke;z-index: 99;display: none;
				   }
				  
				   #search-t{
				  display: block;
				  height: 80px;width: 1000px;
				   background: none;font-size: 48px;color: black;padding: 25px 40px;
				   position: relative;
				   }
				  #search-logo{
					  position: absolute;
					  z-index: 100;
					  top: 100px;
					  right: 80px;
					  padding: 20px;
				  }
				  #searchCanvas{
					transform: scale(.8);
				  }
				  .lyrics-li{
					  color: black;
					  font-size: 24px;
				  }
			  
				  
				  .send-comment{
					width: 800px; height: 100px;margin: 40px auto;display: block;border: none; font-size: 36px;color: white;
					position: relative;
				  }
				  .send-comment-bgr{
				    position: absolute;top: 0;left: 0;
					border-radius: 10px; opacity: .1 ; background: whitesmoke;width: 100%;height: 100%;
				  }
				  #send-comment-left{
					position: absolute;top: 15px;left: 15px;height: 70px;width: 70px;background:url('../img/comment.png');
					background-size: cover;background-repeat: no-repeat;
				      
				
				  }
				  #send-comment-text{
					position: absolute;top: 0;left: 100px;
					  height: 100%;width: 700px;font-size: 40px;
					  margin: 0;
					  padding: 0;
					  color: white;
					  background:none;
					  border: none;outline:medium;
             
				  }
				  #send-comment-text::-moz-placeholder { color: white; }
		          #send-comment-text::-webkit-input-placeholder { color:white; }
				  #send-comment-text-ms-input-placeholder { color:white; }
				
				  #comment-area{
				     height: 90%;width: 800px;

					 margin: 50px auto;
					 overflow: scroll;
					 overflow-x: hidden;
				  }
				  .comment{
					  width: 800px;display: block;
					  margin: 80px 0;
				  }
				  .comment-logo{
					  width: 100px;
					  display: inline-block;
					
					text-align: start;
					vertical-align: top;
					margin-left: 10px;
                    margin-top: 40px;
				  }
				  .comment-logo img{
					  height: 100px;width: 100px;border-radius: 50%;
				
				  }
				  .comment-content{
					width: 630px;
					display: inline-block;
				margin: 10px 20px;
		     	
				}
				.comment-content h1{
					font-size: 40px;color: white;
					margin-bottom: 20px;
				}
				.comment-content p {
					font-size: 36px;
					color: white;
					font-weight: 100;
				}
				#loading{
					height: 50px;width: 50px;
					border-radius: 50%;
					margin: 60px auto;
					overflow: hidden;
				}
				#loading img{
					height: 100%;width: 100%;
					transform: scale(3)
				}
				#play-way{
					position: absolute;
					height: 40px;
					width: 70px;
					background: url('../img/loop2.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;
					right: 140px;
					top: 50px;
				}
				#sumbit{
					height: 72px;width: 200px;
					background: whitesmoke;
					font-size: 42px;
					margin: 10px auto;
					text-align: center;
					line-height: 72px;
					border-radius: 30px;
					margin-bottom: -60px;
					display: none;
				}
				#login{
					height: 500px;width: 80%;
					background: white;
					position: absolute;
					top: 450px;
					left:10%;
					z-index: -1;
					transform: perspective(600px) rotateX(40deg);
					 border-radius:20px; 
					 transition:all 1200ms ;
					 opacity: 0;
					 display: flex;
					 flex-wrap: wrap;
					 justify-content: center;
					 align-content: space-around;
				}
				.login-box{
					height: 80px;width: 80%;
			
					border-radius: 10px;
					position: relative;
				}
				.login-box span{
					font-size: 42px;
					line-height: 70px;
				}
				.login-box  div{
					display: block;
					float: left;
					margin-left:40px;
					background: whitesmoke;
					box-shadow: 2px 2px 2px gray;
					height: 70px;width: 160px;
					border-radius: 20px;
					text-align: center;
				}
				.email{
				  position: absolute;
				  right: 0;
				  top: 0;	
				  height:70px;
				  width: 70%;
				  border:5px solid red;
				  font-size: 36px;
				}
				.password{
					position: absolute;
					right: 0;
					top: 0;	
					height:70px;
					width: 70%;
					border:5px solid red;
			       font-size: 36px;
				}
				.prmote{
					height: 70px;margin: -30px 0 -50px 0;
					width:80%;
					text-align: center;
					line-height:70px;
					font-size: 40px;
					color: red;
				   display: none;
				}